/* EDAXO Shoptet
   Scope: native Shoptet header, carousel, category banners and footer.
   Shoptet CSS and JavaScript must remain enabled. */

:root {
  --e-bg: #f3f2f2;
  --e-surface: #ffffff;
  --e-surface-soft: #eae9e9;
  --e-text: #201e1d;
  --e-muted: #6f6b69;
  --e-border: #d8d5d3;
  --e-accent: #ec3013;
  --e-accent-dark: #c72710;
  --e-banner-text: #ffffffc2;
  --e-shell: 1800px;
  --e-radius: 16px;
  --e-radius-lg: 20px;
  --e-heading: "Poppins", "Source Sans 3", Arial, sans-serif;
  --e-body: "Source Sans 3", Arial, sans-serif;
}

body.edaxo {
  overflow-x: hidden;
  background: var(--e-bg) !important;
  color: var(--e-text);
  font-family: Archivo, system-ui, sans-serif;
}

body.edaxo .edaxo-empty {
  display: none !important;
}

/* Native Shoptet toast/notification container (e.g. "added to cart") -
   its native width is wider than mobile viewports, which was forcing the
   whole page to scroll horizontally even though it's normally empty. */
body.edaxo .messages {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Info strip */
body.edaxo .edaxo-info {
  position: relative;
  z-index: 1201;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 44px);
  padding: 8px 20px;
  background: var(--e-text);
  color: var(--e-bg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
}

body.edaxo .edaxo-info span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: clamp(18px, 4vw, 44px);
  vertical-align: -2px;
  background: rgba(255,255,255,.42);
}

body.edaxo .edaxo-info {
  display: none !important;
}

/* top-navigation-bar styled like the old edaxo-info bar */
body.edaxo .top-navigation-bar {
  position: relative !important;
  z-index: 1201 !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 20px !important;
  background: var(--e-text) !important;
  color: var(--e-bg) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
}

body.edaxo .top-navigation-bar .container {
  width: min(calc(100% - 48px), var(--e-shell)) !important;
  max-width: var(--e-shell) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 4vw, 44px) !important;
}

body.edaxo .top-navigation-bar .top-navigation-contacts {
  display: none !important;
}

body.edaxo .top-navigation-bar .top-navigation-tools {
  display: none !important;
}

body.edaxo .top-navigation-bar a {
  color: var(--e-bg) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.edaxo .top-navigation-bar a:hover {
  color: var(--e-surface) !important;
  text-decoration: underline !important;
}

body.edaxo .top-navigation-menu {
	background-color: transparent !important;
	font-size: 12px !important;
}

body.edaxo .top-navigation-bar-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  row-gap: 4px !important;
  column-gap: clamp(14px, 3vw, 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.edaxo .top-navigation-bar-menu li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.edaxo .top-navigation-bar-menu li + li::before {
  content: "|";
  position: absolute;
  left: calc(-1 * clamp(9px, 1.6vw, 17px));
  transform: translate(-50%, -50%);
  color: var(--e-bg);
  opacity: .45;
  margin-top: 0 !important;
}

body.edaxo .top-navigation-bar-menu a {
  color: var(--e-bg) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body.edaxo .top-navigation-bar-menu a:hover {
  color: var(--e-surface) !important;
  text-decoration: underline !important;
}

/* Native Shoptet overflow-detection helpers for this menu: an off-screen
   clone list (used to measure whether items fit) and a "more" trigger
   button shown when they don't. We let the real menu wrap instead, so
   both are unused - hide them and force the real list visible in case
   the native overflow JS toggles it off. */
body.edaxo .top-navigation-menu-trigger,
body.edaxo .top-navigation-bar-menu-helper {
  display: none !important;
}

body.edaxo ul.top-navigation-bar-menu {
  display: flex !important;
  visibility: visible !important;
}

/* Native header */
body.edaxo #header {
  position: sticky;
  top: 0;
  z-index: 1200;
  border: 0 !important;
  background: var(--e-bg) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

body.edaxo #header > .container.navigation-wrapper {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 max(24px, calc((100% - var(--e-shell)) / 2)) !important;
  box-sizing: border-box !important;
}

body.edaxo #header .header-top {
  height: 76px !important;
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: auto auto 1fr auto !important;
  align-items: center !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
  padding: 0 !important;
}

body.edaxo #header .header-top > * {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

body.edaxo #header .site-name-wrapper,
body.edaxo #header .site-name {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.edaxo #header .site-name a {
  display: inline-flex !important;
  align-items: center;
}

body.edaxo #header .site-name img {
  width: auto !important;
  max-width: 112px !important;
  max-height: 42px !important;
  object-fit: contain !important;
}

body.edaxo .edaxo-categories-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--e-text);
  font-family: Archivo, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

body.edaxo .edaxo-categories-toggle:hover,
body.edaxo.edaxo-menu-open .edaxo-categories-toggle {
  background: var(--e-surface);
  color: var(--e-accent);
}

body.edaxo .edaxo-categories-toggle svg {
  width: 22px;
  height: 22px;
}

body.edaxo #header .search {
  width: 320px !important;
  max-width: 320px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: end !important;
}

body.edaxo #header .search-form,
body.edaxo #header .search .compact-form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

body.edaxo #header .search-form fieldset {
  position: relative !important;
  min-height: 44px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

body.edaxo #header .search-input,
body.edaxo #header input[type="search"] {
  width: 320px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 20px 0 44px !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 999px !important;
  outline: 0 !important;
  background: var(--e-surface-soft) !important;
  color: var(--e-text) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

body.edaxo #header .search-input:focus,
body.edaxo #header input[type="search"]:focus {
  border-color: var(--e-text) !important;
  box-shadow: 0 0 0 3px rgba(32,30,29,.08) !important;
}

body.edaxo #header .search-form button {
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  right: auto !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--e-muted) !important;
  font-size: 0 !important;
  cursor: pointer !important;
  transform: translateY(-50%) !important;
}

body.edaxo #header .search-form button::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

body.edaxo #header .search-form button::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

body.edaxo #header .navigation-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.edaxo #header .navigation-buttons .dropdown,
body.edaxo #header .navigation-buttons .top-nav-button-login,
body.edaxo #header .navigation-buttons a[data-testid="headerCart"] {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--e-text) !important;
  font-family: Archivo, system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

body.edaxo #header .navigation-buttons .dropdown:hover {
  background: var(--e-surface) !important;
  color: var(--e-accent) !important;
}

body.edaxo #header .navigation-buttons .top-nav-button-login:hover,
body.edaxo #header .navigation-buttons a[data-testid="headerCart"]:hover {
  background: var(--e-surface) !important;
  color: var(--e-accent) !important;
}

body.edaxo #header .navigation-buttons .dropdown > span,
body.edaxo #header .navigation-buttons .dropdown > button {
  color: inherit !important;
  font-size: 11px !important;
}

body.edaxo #header .navigation-buttons .dropdown > span {
  display: none !important;
}

body.edaxo #header a[data-testid="headerCart"] .sr-only {
  display: none !important;
}

body.edaxo #header .top-nav-button-login > span:not(.edaxo-nav-icon) {
  display: none !important;
}

body.edaxo #header a[data-testid="headerCart"] .cart-price {
  display: none !important;
}

/* Native JS toggles "full"/"hovered" state classes on the cart link (e.g.
   once an item is added) - these can carry their own native positioning,
   so pin the link back down explicitly in every state. */
body.edaxo #header a[data-testid="headerCart"],
body.edaxo #header a[data-testid="headerCart"].hovered,
body.edaxo #header a[data-testid="headerCart"].full {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Item-count badge - give it a small, pinned position instead of whatever
   native layout it expected around the original (bigger/differently
   placed) native cart icon. */
body.edaxo #header a[data-testid="headerCart"] i[data-testid="headerCartCount"] {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--e-accent) !important;
  color: var(--e-surface) !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1 !important;
}

/* Icon instead of text label for login and cart (both desktop and mobile). */
body.edaxo #header .navigation-buttons .edaxo-nav-icon {
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  pointer-events: none !important;
}

body.edaxo #header .navigation-buttons .edaxo-nav-icon svg {
  width: 100% !important;
  height: 100% !important;
}


/* Category menu: native #navigation as a left slide-in drawer with a flyout sub-panel. */
body.edaxo #navigation {
  position: fixed !important;
  top: 0 !important;
  left: calc(-1 * min(360px, 88vw)) !important;
  bottom: 0 !important;
  z-index: 1250 !important;
  width: min(360px, 88vw) !important;
  max-width: none !important;
  max-height: none !important;
  height: 100vh !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 88px 20px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--e-bg) !important;
  box-shadow: none !important;
  transition: left .14s cubic-bezier(0.4, 0, 0.2, 1) !important;
  scrollbar-width: none !important;
}

body.edaxo #navigation li#nav-manufacturers {
  display: none !important;
}

body.edaxo .edaxo-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1240;
  background: rgba(32, 30, 29, 0.45);
  display: none;
}

body.edaxo.edaxo-menu-open .edaxo-menu-backdrop {
  display: block !important;
}

body.edaxo #navigation::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.edaxo.edaxo-menu-open #navigation {
  left: 0 !important;
  box-shadow: 0 24px 60px rgba(32,30,29,.18) !important;
  transition: left .32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.edaxo #navigation .edaxo-nav-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--e-text) !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

body.edaxo #navigation .edaxo-nav-close:hover {
  background: color-mix(in srgb, var(--e-text) 8%, transparent) !important;
}

body.edaxo #navigation .navigation-in {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

body.edaxo #navigation .menu-level-1 {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 60px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  list-style: none !important;
  background: transparent !important;
}

/* Extra-specificity guard: some native Shoptet CSS also targets #navigation
   with !important, so this repeats the ID to win the specificity tie. */
body.edaxo #navigation#navigation {
  padding: 50px 20px 28px !important;
}

body.edaxo #navigation .menu-level-1 > li {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.edaxo #navigation .menu-level-1 > li > a {
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--e-text) !important;
  font-family: var(--e-heading) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  white-space: normal !important;
}

body.edaxo #navigation .menu-level-1 > li > a:hover,
body.edaxo #navigation .menu-level-1 > li.edaxo-exp > a {
  background: var(--e-bg) !important;
  color: var(--e-accent) !important;
}

body.edaxo #navigation .menu-level-1 > li > a > b {
  text-transform: uppercase !important;
  font-weight: normal !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body.edaxo #navigation .menu-level-1 > li.edaxo-exp .submenu-arrow {
  transform: rotate(-135deg) !important;
}

/* Sub-menu (level 2) with images: flies out beside the drawer when the parent is expanded */
body.edaxo #navigation .menu-level-2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  align-content: flex-start !important;
  position: fixed !important;
  top: 0 !important;
  left: min(360px, 88vw) !important;
  bottom: 0 !important;
  width: min(720px, 92vw) !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 88px 20px 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  list-style: none !important;
  z-index: 1251 !important;
  clip-path: inset(0 100% 0 0) !important;
  visibility: hidden !important;
  transition: none !important;
}

body.edaxo.edaxo-menu-open #navigation .menu-level-1 > li.edaxo-exp > .menu-level-2 {
  clip-path: inset(0 0 0 0) !important;
  visibility: visible !important;
  box-shadow: 24px 0 60px rgba(32,30,29,.18) !important;
  transition: none !important;
}

@media (min-width: 768px) {
  /* Keep the flyout panel space always visible (blank white) while the
     drawer is open, instead of collapsing to nothing when no category is
     active - sits behind the real per-category panels. Fades in/out with
     the drawer itself (not with category switching). */
  /* This panel sits at a fixed left: min(360px, 88vw) (the drawer's
     RESTING right edge). Instead of a clip-path reveal on that fixed
     position - which would leave a gap against the drawer's currently-
     moving edge, or a dead pause if delayed until the drawer settles -
     it physically slides with transform, using the exact same duration
     and easing as the drawer's `left` transition. Both moving in lockstep
     means their edges stay contiguous (no gap) at every point in time,
     with zero extra delay needed (no pause). */
  body.edaxo #navigation::after {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: min(360px, 88vw) !important;
    bottom: 0 !important;
    width: min(720px, 92vw) !important;
    background: #fff !important;
    box-shadow: 24px 0 60px rgba(32,30,29,.18) !important;
    z-index: 1249 !important;
    visibility: hidden !important;
    transform: translateX(-100%) !important;
    /* Closing duration matches the drawer's own close transition (.22s,
       shorter than its .32s open), so the panel doesn't linger past the
       point where the drawer has already fully closed. */
    transition: transform .14s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear .14s !important;
  }

  body.edaxo.edaxo-menu-open #navigation::after {
    visibility: visible !important;
    transform: translateX(0) !important;
    transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s !important;
  }

  /* Switch categories on hover instead of requiring a click - instant,
     no animation. */
  body.edaxo.edaxo-menu-open #navigation .menu-level-1 > li:hover > .menu-level-2 {
    clip-path: inset(0 0 0 0) !important;
    visibility: visible !important;
    box-shadow: 24px 0 60px rgba(32,30,29,.18) !important;
    transition: none !important;
  }

  /* Ignore hover while the opening animation is still running (before JS
     adds .edaxo-menu-ready), so it can't trigger a category switch. */
  body.edaxo.edaxo-menu-open:not(.edaxo-menu-ready) #navigation .menu-level-1 > li,
  body.edaxo.edaxo-menu-open:not(.edaxo-menu-ready) #navigation .menu-level-1 > li > a {
    pointer-events: none !important;
  }
}

/* Extra-specificity guard: native Shoptet CSS also resets .menu-level-2 padding
   with !important, so this repeats the ID to win the specificity tie. */
body.edaxo #navigation#navigation .menu-level-2 {
  padding: 24px 20px 28px !important;
}

@media (max-width: 760px) {
  body.edaxo #navigation .menu-level-2 {
    left: 0 !important;
    width: 100vw !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

body.edaxo #navigation .menu-level-2 > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

body.edaxo #navigation .menu-level-2 a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--e-text) !important;
  font-family: Archivo, system-ui, sans-serif !important;
  font-weight: 600 !important;
  line-height: 0.95 !important;
  text-decoration: none !important;
}

body.edaxo #navigation .menu-level-2 a:hover {
  color: var(--e-accent) !important;
}

body.edaxo #navigation .menu-level-2 a.menu-image {
  padding: 0 !important;
  border: 0 !important;
}

body.edaxo #navigation .menu-level-2 img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 14 / 10 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Third-level links inside a submenu item: plain text list */
body.edaxo #navigation .menu-level-3 {
  display: none !important;
}

/* Hide the native hamburger menu */
body.edaxo #header .menu-helper {
  display: none !important;
}

body.edaxo #navigation .navigation-close {
  display: none !important;
}


/* Carousel */
body.edaxo .homepage-box.before-carousel {
  position: relative !important;
  margin: 0 !important;
  padding: 0px 0px clamp(16px, 2vw, 42px) !important;
  background: var(--e-bg) !important;
  border-bottom: 0 !important;
}

body.edaxo .homepage-box.before-carousel::after {
  content: "" !important;
  position: absolute !important;
  left: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  right: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  bottom: 0 !important;
  height: 2px !important;
  background: var(--e-border) !important;
}

body.edaxo .homepage-box.before-carousel > .content-wrapper-in > .container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.edaxo .banners-row,
body.edaxo .wide-carousel,
body.edaxo #carousel {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.edaxo .container:has(> .banners-row)::before,
body.edaxo .container:has(> .banners-row)::after,
body.edaxo .banners-row::before,
body.edaxo .banners-row::after {
  content: none !important;
  display: none !important;
}

body.edaxo .homepage-box{
  border-top-color: transparent !important;
}

body.edaxo .banners-row {
  display: block !important;
}

body.edaxo .banners-row > .wide-carousel {
  width: 100% !important;
  float: none !important;
}

body.edaxo .banners-row:not(.has-text-banner) > :not(.wide-carousel) {
  display: none !important;
}

/* "Banner: Top" layout - full-width main carousel (.col-sm-8), with a second
   full-width row of tiles (.col-sm-4) stacked below it, styled like the
   benefitBanner category tiles. Used as a benefitBanner alternative that
   isn't limited in item count.
   Note: intentionally NOT scoped under .homepage-box.before-carousel -
   on mobile Shoptet renders this row without that wrapper class at all,
   so a selector requiring it never matches there. */
body.edaxo .banners-row.has-text-banner {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(16px, 2vw, 42px) !important;
  position: relative !important;
  background: var(--e-bg) !important;
  padding-bottom: clamp(16px, 2vw, 42px) !important;
}

/* Same bottom divider as .homepage-box.before-carousel::after, applied
   directly to the row itself so it still shows when the wrapper is
   missing (mobile). */
body.edaxo .banners-row.has-text-banner::after {
  content: "" !important;
  position: absolute !important;
  left: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  right: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  bottom: 0 !important;
  height: 2px !important;
  background: var(--e-border) !important;
}

body.edaxo .banners-row.has-text-banner > .col-sm-8,
body.edaxo .banners-row.has-text-banner > .col-sm-4 {
  float: none !important;
  width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  min-width: 0 !important;
}

body.edaxo .banners-row.has-text-banner > .col-sm-4 {
  padding: 0 clamp(32px, 3.3vw, 64px) !important;
  top: calc(-1 * max(12px, 1.7vw)) !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: calc(-1 * var(--e-radius-lg)) !important;
  padding-top: var(--e-radius-lg) !important;
  border-top-left-radius: var(--e-radius-lg) !important;
  border-top-right-radius: var(--e-radius-lg) !important;
  background: var(--e-bg) !important;
}

body.edaxo .edaxo-topbanners-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

body.edaxo .edaxo-topbanners-title {
  margin: 0 !important;
  text-align: left !important;
  color: var(--e-text) !important;
  font-family: var(--e-heading) !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}

body.edaxo .edaxo-topbanners-controls {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
}

body.edaxo .edaxo-topbanners-arrow {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 50% !important;
  background: var(--e-surface) !important;
  color: var(--e-text) !important;
  font-size: 20px !important;
  cursor: pointer !important;
}

body.edaxo .edaxo-topbanners-arrow:disabled {
  opacity: .35 !important;
  cursor: default !important;
}

body.edaxo .next-to-carousel-banners {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none !important;
}

body.edaxo .next-to-carousel-banners::-webkit-scrollbar {
  display: none !important;
}

body.edaxo .next-to-carousel-banners > .banner-wrapper {
  flex: 0 0 190px !important;
  align-self: flex-start !important;
  width: 190px !important;
  max-width: 190px !important;
  min-width: 190px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  scroll-snap-align: start;
  overflow: visible !important;
  background: transparent !important;
}

body.edaxo .banner-wrapper a {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  color: var(--e-text) !important;
  text-decoration: none !important;
}

body.edaxo .banner-wrapper img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: var(--e-radius) !important;
}

body.edaxo .banner-wrapper .extended-banner-texts {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 0 !important;
  background: none !important;
  color: var(--e-text) !important;
  text-shadow: none !important;
}

body.edaxo .banner-wrapper .extended-banner-title {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--e-text) !important;
  font-family: var(--e-heading) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: .015em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
  border: none !important;
  box-shadow: none !important;
}

body.edaxo .banner-wrapper .extended-banner-text {
  display: block !important;
  position: static !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--e-muted) !important;
  font-family: var(--e-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
}

body.edaxo .banner-wrapper .extended-banner-link {
  display: block !important;
  position: absolute !important;
  top: 145px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-30%) !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 6px 8px 10px !important;
  background: var(--e-surface) !important;
  border: none !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  color: var(--e-text) !important;
  font-family: var(--e-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

body.edaxo #carousel {
  position: relative !important;
  overflow: hidden !important;
  border-top-left-radius: var(--e-radius-lg) !important;
  border-top-right-radius: var(--e-radius-lg) !important;
  background: var(--e-bg) !important;
  box-shadow: none !important;
}

body.edaxo #carousel .carousel-inner {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1600 / 611 !important;
  overflow: hidden !important;
}

body.edaxo #carousel .item,
body.edaxo #carousel .item > a {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body.edaxo #carousel .item img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

body.edaxo #carousel .extended-banner-texts:empty {
  display: none !important;
}

body.edaxo #carousel .carousel-control {
  display: none !important;
}

/* Text-over-image carousel banner (pasted via Shoptet banner editor content).
   Height matches the slide (not a fixed min-height) so it never overflows
   #carousel's aspect-ratio-driven, overflow:hidden box. */
body.edaxo .edaxo-banner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}

body.edaxo .edaxo-banner img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

body.edaxo .edaxo-banner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 100%) !important;
  z-index: 1 !important;
}

body.edaxo .edaxo-banner > div {
  position: relative !important;
  z-index: 2 !important;
  max-width: 720px !important;
  padding: 0 0 clamp(24px, 4vw, 46px) clamp(24px, 4vw, 42px) !important;
  color: var(--e-surface) !important;
}

body.edaxo .edaxo-banner__eyebrow {
  display: block !important;
  font-size: clamp(11px, 1.1vw, 14px) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--e-accent) !important;
  margin-bottom: clamp(8px, 1.5vw, 18px) !important;
}

body.edaxo .edaxo-banner h2 {
  font-size: clamp(22px, 4vw, 64px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  margin: 0 0 clamp(10px, 2vw, 24px) !important;
  color: var(--e-surface) !important;
}

body.edaxo .edaxo-banner p {
  font-size: clamp(12px, 1.3vw, 16px) !important;
  line-height: 1.5 !important;
  margin: 0 0 clamp(12px, 2.5vw, 34px) !important;
  color: var(--e-surface-soft) !important;
  max-width: 480px !important;
}

body.edaxo .edaxo-banner__buttons {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

body.edaxo .edaxo-banner__btn {
  display: inline-block !important;
  padding: clamp(8px, 1.6vw, 14px) clamp(16px, 3vw, 30px) !important;
  border-radius: 999px !important;
  font-size: clamp(12px, 1.2vw, 16px) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
  cursor: pointer !important;
}

body.edaxo .edaxo-banner__btn--primary {
  background: var(--e-accent) !important;
  color: var(--e-surface) !important;
  border: 2px solid var(--e-accent) !important;
}
body.edaxo .edaxo-banner__btn--primary:hover {
  background: var(--e-accent-dark) !important;
  border-color: var(--e-accent-dark) !important;
}

body.edaxo .edaxo-banner__btn--outline {
  background: transparent !important;
  color: var(--e-surface) !important;
  border: 2px solid var(--e-banner-text) !important;
}
body.edaxo .edaxo-banner__btn--outline:hover {
  background: rgba(255,255,255,.15) !important;
}

/* Replaced by the "Banner: Top" tiles (.next-to-carousel-banners) - hide the
   native benefitBanner widget and its wrapper entirely. */
body.edaxo .content-wrapper.homepage-box:has(.benefitBanner) {
  display: none !important;
}

/* Wrapper JS moves #dklabBanplusUvod into, right after the carousel/banners box. */
body.edaxo .edaxo-dklab-wrapper {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(32px, 3.3vw, 64px) max(28px, calc((100% - var(--e-shell)) / 2)) clamp(54px, 6vw, 92px) !important;
  padding-left: clamp(32px, 3.3vw, 64px) !important;
  background: rgb(248, 244, 244) !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

body.edaxo .edaxo-dklab-wrapper::after {
  content: "" !important;
  position: absolute !important;
  left: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  right: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  height: 2px !important;
  background: var(--e-border) !important;
}

body.edaxo .edaxo-dklab-wrapper::before {
  top: 0 !important;
}

body.edaxo .edaxo-dklab-wrapper::after {
  bottom: 0 !important;
}

body.edaxo .edaxo-dklab-title {
  margin: 0 0 24px !important;
  color: var(--e-text) !important;
  font-family: var(--e-heading) !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
}

/* "Novinky pre váš domov" bento grid: one large banner (50% width) + 4 small
   banners (2x2) filling the other half. Native DKLAB Banner Plus widget. */
body.edaxo #dklabBanplusUvod.dklabBanplusUvod {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 16px !important;
  aspect-ratio: 2 / 1 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.edaxo #dklabBanplusUvod .dklabBanplusBox {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-top-left-radius: var(--e-radius) !important;
  border-top-right-radius: var(--e-radius) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background: var(--e-surface-soft) !important;
}

body.edaxo #dklabBanplusUvod .dklabBanplusBox::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 15% !important;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.00)) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

body.edaxo #dklabBanplusUvod .dklabBanHome_17533 {
  grid-column: 1 / 3 !important;
  grid-row: 1 / 3 !important;
}

body.edaxo #dklabBanplusUvod .dklabBanHome_17534 {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
}

body.edaxo #dklabBanplusUvod .dklabBanHome_17535 {
  grid-column: 4 / 5 !important;
  grid-row: 1 / 2 !important;
}

body.edaxo #dklabBanplusUvod .dklabBanHome_17536 {
  grid-column: 3 / 4 !important;
  grid-row: 2 / 3 !important;
}

body.edaxo #dklabBanplusUvod .dklabBanHome_17537 {
  grid-column: 4 / 5 !important;
  grid-row: 2 / 3 !important;
}

body.edaxo #dklabBanplusUvod .dklabBanplusBox picture,
body.edaxo #dklabBanplusUvod .dklabBanplusBox img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

body.edaxo #dklabBanplusUvod .dklabBanplusBoxText {
  display: block !important;
  position: absolute !important;
  top: auto !important;
  left: 18px !important;
  right: auto !important;
  bottom: 8px !important;
  width: auto !important;
  max-width: calc(100% - 36px) !important;
  margin: 0 !important;
  text-align: left !important;
  z-index: 2 !important;
  color: #fff !important;
  font-family: var(--e-heading) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  /*text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;*/
}

/* Extra-specificity guard: native Shoptet CSS also positions .dklabBanplusBoxText
   with !important, so this repeats the ID to win the specificity tie. */
body.edaxo #dklabBanplusUvod#dklabBanplusUvod .dklabBanplusBoxText {
  position: absolute !important;
  left: 18px !important;
  right: auto !important;
  bottom: 16px !important;
  top: auto !important;
  text-align: left !important;
}

@media (max-width: 767px) {
  body.edaxo #dklabBanplusUvod.dklabBanplusUvod {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto repeat(2, 1fr) !important;
    aspect-ratio: auto !important;
    gap: 10px !important;
  }

  body.edaxo #dklabBanplusUvod .dklabBanHome_17533 {
    grid-column: 1 / 3 !important;
    grid-row: 1 / 2 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.edaxo #dklabBanplusUvod .dklabBanHome_17534 {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
  }

  body.edaxo #dklabBanplusUvod .dklabBanHome_17535 {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
  }

  body.edaxo #dklabBanplusUvod .dklabBanHome_17536 {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
  }

  body.edaxo #dklabBanplusUvod .dklabBanHome_17537 {
    grid-column: 2 / 3 !important;
    grid-row: 3 / 4 !important;
  }

  body.edaxo #dklabBanplusUvod .dklabBanHome_17534,
  body.edaxo #dklabBanplusUvod .dklabBanHome_17535,
  body.edaxo #dklabBanplusUvod .dklabBanHome_17536,
  body.edaxo #dklabBanplusUvod .dklabBanHome_17537 {
    aspect-ratio: 1 / 1 !important;
  }
}

/* Native SEO welcome section - hidden entirely. */
body.edaxo .homepage-box.welcome-wrapper {
  margin: 0 !important;
  padding: clamp(54px, 6vw, 88px) 24px !important;
  background: var(--e-surface) !important;
  display: none !important;
}

body.edaxo .homepage-box.welcome-wrapper > .content-wrapper-in > .container {
  width: min(calc(100% - 48px), var(--e-shell)) !important;
  max-width: var(--e-shell) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.edaxo .welcome {
  max-width: 1120px !important;
  margin: 40px auto 0 !important;
  color: var(--e-muted) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

body.edaxo .welcome > .h1,
body.edaxo .welcome [data-testid="eshopHeader"] {
  max-width: 780px;
  margin: 0 0 24px !important;
  color: var(--e-text) !important;
  font-family: var(--e-heading) !important;
  font-size: clamp(28px, 3.1vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
}

body.edaxo .welcome h2 {
  margin: 34px 0 12px !important;
  color: var(--e-text) !important;
  font-size: clamp(21px, 2vw, 30px) !important;
  line-height: 1.15 !important;
}

body.edaxo .welcome a { color: var(--e-accent) !important; }

/* Testimonials: native "latest-contribution" shop comments + product ratings,
   restyled by JS into two horizontal card rows. */
body.edaxo .content-wrapper.latest-contribution-box {
  margin: 0 !important;
  padding: clamp(16px, 2vw, 42px) 0 !important;
  background: var(--e-bg) !important;
}

body.edaxo .content-wrapper.latest-contribution-box > .content-wrapper-in > .container {
  width: min(calc(100% - 48px), var(--e-shell)) !important;
  max-width: var(--e-shell) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.edaxo .edaxo-testimonials-title {
  margin: 0 0 28px !important;
  color: var(--e-text) !important;
  font-family: var(--e-heading) !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
  text-align: left !important;
}

body.edaxo .latest-contribution-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

body.edaxo .latest-contribution > h2 {
  margin: 0 0 12px !important;
  color: var(--e-text) !important;
  font-family: var(--e-heading) !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
  font-weight: 700 !important;
}

body.edaxo .latest-contribution {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.edaxo .edaxo-testi-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 20px !important;
}

body.edaxo .latest-contribution-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--e-surface-soft) !important;
  color: var(--e-text) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.edaxo .latest-contribution-image {
  display: none !important;
}

body.edaxo .latest-contribution-product,
body.edaxo .latest-contribution-title {
  display: none !important;
}

/* Native Shoptet rule reserves `width: calc(100% - 100px)` for the avatar
   column; since we hide .latest-contribution-image, content should be 100%. */
body.edaxo .latest-contribution-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  gap: 8px !important;
  padding: 0 !important;
}

body.edaxo .edaxo-testi-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
  margin: 0 !important;
}

body.edaxo .edaxo-testi-author {
  flex: 1 1 auto !important;
  color: var(--e-text) !important;
  font-family: var(--e-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Matches .tag + .tag-outline from styles.css (page-level override gives
   .tag its pill radius/padding; .tag-outline supplies the border/color). */
body.edaxo .edaxo-verified-badge {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border: 1px solid var(--e-accent) !important;
  border-radius: 999px !important;
  color: var(--e-accent) !important;
  font-family: var(--e-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

body.edaxo .latest-contribution-inner .stars {
  display: block !important;
  margin: 0 !important;
}

body.edaxo .latest-contribution-inner .star {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--e-accent) !important;
}

/* Matches .card-body from styles.css (flex:1 pins .edaxo-testi-date to
   the bottom of the card regardless of how long the review text is). */
body.edaxo .latest-contribution-description {
  position: relative !important;
  flex: 1 1 auto !important;
  max-height: 6em !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--e-text) !important;
  opacity: .8 !important;
  font-family: var(--e-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Fade-out gradient only added when the text is actually clipped - see
   restyleTestimonialCard() in the JS, which measures scrollHeight and sets
   this class. Height matches exactly one line so it never cuts mid-line. */
body.edaxo .latest-contribution-description.edaxo-testi-truncated::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1.5em !important;
  background: linear-gradient(to bottom, rgba(234, 233, 233, 0), var(--e-surface-soft)) !important;
  pointer-events: none !important;
}

/* Matches .card-meta from styles.css. */
body.edaxo .edaxo-testi-date {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  color: color-mix(in srgb, var(--e-text) 50%, transparent) !important;
  font-family: var(--e-body) !important;
  font-size: 11px !important;
}

/* Footer CTA */
body.edaxo .edaxo-footer-cta {
  padding: clamp(56px, 7vw, 96px) 24px;
  background: var(--e-text);
  color: var(--e-surface);
}

body.edaxo .edaxo-footer-cta-inner {
  width: min(100%, 760px);
  margin: 0 auto;
  text-align: center;
}

body.edaxo .edaxo-footer-cta h2 {
  margin: 0 0 12px;
  color: var(--e-surface);
  font-family: var(--e-heading);
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
}

body.edaxo .edaxo-footer-cta p {
  margin: 0 0 24px;
  color: var(--e-banner-text);
  font-size: 16px;
}

body.edaxo .edaxo-footer-cta a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--e-accent);
  color: var(--e-surface) !important;
  font-family: var(--e-heading);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
}

/* Native footer */
body.edaxo #footer {
  margin: 0 !important;
  border-top: 2px solid color-mix(in srgb, var(--e-border) 40%, transparent) !important;
  background: var(--e-bg) !important;
  color: var(--e-text) !important;
}

body.edaxo #footer > .container,
body.edaxo #footer .footer-rows,
body.edaxo #footer .footer-links-icons,
body.edaxo #footer .footer-bottom {
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body.edaxo #footer .footer-rows > .site-name {
  display: none !important;
}

/* 4 columns: E-Shop / Značka / Kontakt / WCAG notice as the 4th block. */
body.edaxo #footer .custom-footer {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 32px !important;
  margin: 0 !important;
  padding: 48px max(28px, calc((100% - var(--e-shell)) / 2)) 0 !important;
}

body.edaxo #footer .custom-footer > div {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--e-text) !important;
}

body.edaxo #footer h3,
body.edaxo #footer h4,
body.edaxo #footer .pageElement__heading {
  margin: 0 0 14px !important;
  color: var(--e-text) !important;
  font-family: var(--e-heading) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.edaxo #footer ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.edaxo #footer li {
  margin: 0 0 8px !important;
  padding: 0 !important;
}

body.edaxo #footer a {
  color: var(--e-text) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  opacity: .8;
}

body.edaxo #footer a:hover {
  color: var(--e-accent) !important;
  opacity: 1;
}

body.edaxo #footer .custom-footer__banner7 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--e-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.edaxo #footer .footer-links-icons {
  padding-top: 20px !important;
  padding-bottom: 10px !important;
}

body.edaxo #footer .footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 24px !important;
}

body.edaxo #footer .footer-bottom {
  position: relative !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 32px !important;
  padding-bottom: 24px !important;
  padding-left: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  padding-right: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  border-top: 0 !important;
  color: var(--e-muted) !important;
  font-size: 12px !important;
}

body.edaxo #footer#footer .footer-bottom::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  right: max(28px, calc((100% - var(--e-shell)) / 2)) !important;
  width: auto !important;
  height: 2px !important;
  background: color-mix(in srgb, var(--e-muted) 40%, transparent) !important;
}

/* Login dropdown (native Shoptet popup, restyled to match the theme) */
body.edaxo #login.user-action-login {
  top: 110px;
  right: 12px !important;
  left: auto !important;
  position: fixed !important;
  z-index: 1260 !important;
  min-width: 360px !important;
  padding: 0px !important;
  box-shadow: var(--shadow-lg) !important;
  animation: edaxoLoginIn .18s ease-out !important;
}

@keyframes edaxoLoginIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.edaxo #login .popup-widget-inner {
  position: relative !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--e-bg) !important;
}

body.edaxo #login .edaxo-popup-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--e-muted) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body.edaxo #login .edaxo-popup-close:hover {
  background: color-mix(in srgb, var(--e-text) 8%, transparent) !important;
  color: var(--e-text) !important;
}

body.edaxo #login #loginHeading,
body.edaxo #login h2 {
  margin: 0 0 20px !important;
  color: var(--e-text) !important;
  font-family: Archivo, system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

body.edaxo #login label {
  color: var(--e-muted) !important;
  font-family: Archivo, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

body.edaxo #header a[data-testid="headerCart"]::before {
  display: none !important;
}

body.edaxo #login .smart-label-wrapper input,
body.edaxo #login .form-group input:not([type="hidden"]) {
  width: 100% !important;
  height: 36px !important;
  padding: 0 16px !important;
  border: 1px solid var(--e-border) !important;
  border-radius: 10px !important;
  background: var(--e-bg) !important;
  color: var(--e-text) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

body.edaxo #login .smart-label-wrapper input:focus,
body.edaxo #login .form-group input:not([type="hidden"]):focus {
  border-color: var(--e-text) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(32,30,29,.08) !important;
}

body.edaxo #login .submit-wrapper button,
body.edaxo #login .submit-wrapper input[type="submit"],
body.edaxo #login button[type="submit"] {
  width: 100% !important;
  min-height: 44px !important;
  margin-top: 6px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--e-accent) !important;
  color: var(--e-surface) !important;
  font-family: Archivo, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body.edaxo #login .submit-wrapper button:hover,
body.edaxo #login .submit-wrapper input[type="submit"]:hover,
body.edaxo #login button[type="submit"]:hover {
  background: var(--e-accent-dark) !important;
}

body.edaxo #login .alternative-links a,
body.edaxo #login a {
  color: var(--e-accent) !important;
  font-family: Archivo, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.edaxo #login .alternative-links {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  margin-top: 14px !important;
}

body.edaxo #login.user-action-login::before {
  display: none !important;
}

@media (max-width: 1199px) {
  body.edaxo #header .header-top {
    grid-template-columns: auto auto minmax(240px, 1fr) auto !important;
  }
}

/* =========================================================================
   MOBILE — device-specific adjustments go here
   ========================================================================= */

@media (max-width: 480px) {
  body.edaxo .top-navigation-bar-menu a {
    font-size: 11px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
  body.edaxo #login.user-action-login {
    left: 12px !important;
    right: 12px !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body.edaxo .overall-wrapper {
    top: 0 !important;
    left: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.edaxo .top-navigation-bar-menu li + li::before {
    margin-top: 0 !important;
    left: calc(-1 * clamp(8px, 1.6vw, 17px));
  }
  body.edaxo .top-navigation-bar-menu {
    row-gap: 5px !important;
  }
  body.edaxo .homepage-box.before-carousel {
    padding: 0 !important;
  }

  body.edaxo #content-wrapper,
  body.edaxo .content-wrapper-in,
  body.edaxo #content {
    padding: 0 !important;
  }
  body.edaxo #footer .custom-footer {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) {
  body.edaxo .edaxo-search-toggle {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.edaxo #header {
    margin-bottom: 0 !important;
  }

  body.edaxo #header > .container.navigation-wrapper {
    padding: 0 12px !important;
  }

  body.edaxo .edaxo-info {
    min-height: 32px;
    gap: 14px;
    padding: 7px 12px;
    font-size: 10px;
  }

  body.edaxo .banners-row.has-text-banner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.edaxo .edaxo-info span:nth-child(2) {
    display: none;
  }

  body.edaxo .edaxo-info span + span::before {
    margin-right: 14px;
  }

  body.edaxo #header .header-top {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: auto auto 1fr !important;
    gap: 8px 12px !important;
    padding: 5px 0px !important;
  }

  body.edaxo #header .site-name img {
    max-width: 104px !important;
    max-height: 34px !important;
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Native Shoptet mobile header (.ums_mobile_header_v1--on) positions
     .site-name absolute at this breakpoint, which collapses/hides the
     logo - keep it in normal flow instead. */
  body.edaxo #header .site-name {
    position: static !important;
  }

  body.edaxo .edaxo-categories-toggle {
    width: 44px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  body.edaxo #navigation .menu-level-1 {
    margin-top: 0 !important;
  }

  body.edaxo #header .search {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.edaxo #header .navigation-buttons {
    min-width: 0;
    gap: 2px !important;
  }

  body.edaxo #header .navigation-buttons .dropdown,
  body.edaxo #header .navigation-buttons .top-nav-button-login,
  body.edaxo #header .navigation-buttons a[data-testid="headerCart"] {
    width: 42px !important;
    height: 42px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
  }

  body.edaxo #header .navigation-buttons .dropdown {
    display: none !important;
  }

  body.edaxo #carousel .carousel-inner {
    /* Matches the actual mobile banner image resolution (1080x1350). */
    aspect-ratio: 1080 / 1350 !important;
    max-height: 60vh !important;
  }

  body.edaxo #footer .custom-footer {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 20px !important;
  }

  body.edaxo #footer .custom-footer__banner7 {
    grid-column: 1 / -1;
  }

  body.edaxo #footer .footer-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  
  /* Search collapses to an icon (matches Shoptet's own .responsive-tools
     pattern) instead of a permanently-open bar eating a whole row. */
  body.edaxo #header .search {
    display: none !important;
  }

  body.edaxo.edaxo-search-open #header .search {
    display: block !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.edaxo #header .search-input,
  body.edaxo #header input[type="search"] {
    width: 100% !important;
  }

  body.edaxo .edaxo-search-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 2px 4px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--e-text) !important;
    cursor: pointer !important;
  }

  body.edaxo .edaxo-search-toggle svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Below the native navigation_breakpoint (767px), Shoptet turns
     .top-navigation-menu into a trigger + absolutely-positioned dropdown,
     so the real menu list contributes 0 height to .top-navigation-bar.
     Force both back into normal flow. */
  body.edaxo .top-navigation-menu {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 0 !important;
    height: auto !important;
  }

  body.edaxo ul.top-navigation-bar-menu {
    position: static !important;
  }

  /* Let the menu text use nearly the full bar instead of the desktop
     insets (20px bar padding + 24px container margin each side). */
  body.edaxo .top-navigation-bar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.edaxo .top-navigation-bar .container {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* #header .header-top: guard the logo against being squeezed out or
     hidden - grid-template-columns above already reserves an "auto"
     track for it, but force visibility explicitly in case any native
     mobile rule at this breakpoint hides .site-name-wrapper. */
  body.edaxo #header .site-name-wrapper,
  body.edaxo #header .site-name {
    display: flex !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    line-height: normal !important;
  }

  /* Native Shoptet forces a 220px minimum height on each footer column's
     .banner wrapper - leaves a lot of empty space under shorter columns
     once the footer stacks to 1-2 columns on mobile. */
  body.edaxo #footer .banner {
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }
  body.edaxo #footer .banner-wrapper {
    margin-top: 0px !important;
  }
  
  body.edaxo .content-wrapper.container .row > div.col-sm-8 {
    padding: 0 !important;
    background: var(--e-bg) !important;
  }

  body.edaxo .content-wrapper.container .row > div.col-sm-4 {
    background: var(--e-bg) !important;
  }

  body.edaxo .edaxo-topbanners-head.edaxo-topbanners-head {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.edaxo .edaxo-topbanners-title {
    display: block !important;
    visibility: visible !important;
  }

  /* Testimonials: a second horizontal-scroll container on this page
     reliably breaks the whole page's width on mobile (native Shoptet
     script conflict, not fixable via CSS) - hide the section on mobile
     instead. */
  body.edaxo .content-wrapper.latest-contribution-box {
    display: none !important;
  }

  /* Native mobile header CSS (:where(.ums_mobile_header_v1--on)) gives
     .submenu-arrow a large icon-font glyph (via ::after) plus 2em side
     padding, ballooning it to ~54px - strip both so only our small CSS
     border-chevron remains. */
  body.edaxo #navigation .submenu-arrow {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body.edaxo #navigation .submenu-arrow::after,
  body.edaxo #navigation .submenu-arrow::before {
    content: none !important;
    display: none !important;
  }

  body.edaxo .content-wrapper.container {
    padding: 0 !important;
  }

  body.edaxo #navigation .menu-level-1 > li > a > b {
    text-transform: uppercase !important;
    font-weight: normal !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  
}